<template>
  <div class="content-content-container">
    <div class="pading">
      <div class="filter-form">
        <el-form ref="form" label-width="80px" :inline="true" size="small">
          <el-form-item label="">
            <el-input v-model="queryData.class_name" clearable placeholder="班级名称" />
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryData.subject_id" placeholder="归属学科" clearable>
              <el-option v-for="item,index in options" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryData.state" placeholder="显示状态" clearable>
              <el-option label="显示" :value="1" />
              <el-option label="隐藏" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="youfu" size="medium" type="primary" @click="$refs.Addclass.dialsgShow=true">创建班级</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表单区域 -->
      <div class="table-box">
        <el-table :data="list" border stripe>
          <!-- prop表示这一列展示哪个数据 -->
          <el-table-column label="#" />
          <el-table-column width="50px" prop="" label="序号" type="index" />
          <el-table-column width="100px" prop="id" label="班级ID" />
          <el-table-column width="200px" prop="class_name" label="班级名称" />
          <el-table-column width="150px" prop="subject_name" label="归属学科" />
          <el-table-column width="200px" prop="teacher_info" label="讲师">
            <template slot-scope="{row}">
              <el-button v-for="item,index in JSON.parse(row.teacher_info)" :key="index" type="primary" plain disabled size="mini">
                {{ item.username }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column width="200px" prop="zhujiao_info" label="助教">
            <template slot-scope="{row}">
              <el-button v-for="item,index in JSON.parse(row.zhujiao_info)" :key="index" type="success" plain disabled size="mini">
                {{ item.username }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column width="200px" prop="manager_info" label="班主任">
            <template slot-scope="{row}">
              <el-button v-for="item,index in JSON.parse(row.manager_info)" :key="index" type="warning" plain disabled size="mini">
                {{ item.username }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column width="150px" prop="username" label="创建人" />
          <el-table-column width="150px" prop="state" label="是否显示">
            <template slot-scope="{row}">
              <el-switch v-model="row.state" inactive-text="否" active-text="是" :active-value="1" :inactive-value="2" />

            </template>
          </el-table-column>
          <el-table-column width="150px" prop="" label="开始结束日期">
            <template slot-scope="{row}">
              {{ row.start_time.substring(0,10) }}至{{ row.end_time.substring(0,10) }}
            </template>
          </el-table-column>
          <el-table-column width="200px" prop="created_at" label="创建日期" />
          <el-table-column width="100px" label="操作" fixed="right">
            <template slot-scope="{row}">
              <el-button size="small" type="primary" icon="el-icon-edit" circle @click="$refs.Addclass.editRow(row.id)" />
              <el-popconfirm title="确定删除吗" @confirm="delRow(row.id)">
                <el-button slot="reference" size="small" type="danger" icon="el-icon-delete" circle />
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-row style="heigth:60px" align="middle" type="flex" justify="end">
        <el-pagination
          :current-page.sync="queryData.page"
          :page-sizes="[10, 40, 80, 100]"
          :page-size="queryData.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @current-change="currentChange"
        />
      </el-row>
    </div>
    <AddClass ref="Addclass" @updateList="initData" />
  </div>
</template>

<script>
import { getClassAPI, getTreeAPI, getTeachers, getSubject, delClass } from '@/api/class'
import AddClass from './components/addClass'
export default {
  name: 'ContentPage',
  components: { AddClass },
  data() {
    return {
      list: [],
      queryData: {
        subject_id: '',
        class_name: '',
        state: '',
        page: 1,
        limit: 10
      },
      // 总数
      total: 0,
      options: []
    }
  },
  // watch: {},

  created() {
    this.initData()
    this.treeData()

    this.getTalkTeacher()
    this.getHelpTeacher()
    this.getCalssAdmin()
    this.getSubjectList()
  },
  methods: {

    // 讲师
    async getTalkTeacher() {
      const res = await getTeachers({ role_name: '讲师' })
      // console.log(res)
      this.$refs.Addclass.TalkTeacher = res
    },
    // 助教、
    async getHelpTeacher() {
      const res = await getTeachers({ role_name: '助教' })
      // console.log(res)
      this.$refs.Addclass.HelpTeacher = res
    },
    // 班任
    async getCalssAdmin() {
      const res = await getTeachers({ role_name: '班主任' })
      // console.log(res)
      this.$refs.Addclass.CalssAdmin = res
    },
    // 学科
    async getSubjectList() {
      const res = await getSubject()
      // console.log(res)
      this.$refs.Addclass.subjectList = res
    },
    async initData() {
      const res = await getClassAPI(this.queryData)
      // console.log(res)
      // res.list.map(item => JSON.parse(item.teacher_info)).map(item => item[0].username)
      // console.log(res.list.map(item => JSON.parse(item.teacher_info)).map(item => item[0].username))
      this.list = res.list
      this.total = res.total
    },
    async treeData() {
      const res = await getTreeAPI()
      // console.log(res)
      this.options = res
    },
    onSubmit() {
      this.queryData.page = 1
      this.initData()
    },
    onReset() {
      this.queryData = {
        subject_id: '',
        class_name: '',
        state: '',
        page: 1,
        limit: 10
      }
      this.initData()
    },
    sizeChange(val) {
      // console.log(val) // 最新每页数量
      this.queryData.limit = val
      this.initData()
    },
    // 页码切换事件
    currentChange(val) {
      // console.log(val) // 最新页码
      this.queryData.page = val
      this.initData()
    },
    // 删除
    async delRow(id) {
      console.log(id)
      await delClass(id)
      this.$message.success('删除成功')
      if (this.list.length === 1 && this.queryData.page > 1) this.queryData.page--
      this.initData()
    }
  }
}
</script>

<style scoped>
.content-content-container{
  padding: 15px;
  background-color: #ddd;
}

.content-content-container .youfu{
  float: right;
}
.pading{
  padding: 15px;
  background-color: #fff;
}
</style>
